<template>
  <div id='gameticket_detail'>
    <div class="container">
      <div class='commodity-title'>
        <p></p>
        <h3>商品信息</h3>
      </div>
      <div class="detail-table">
        <Row>
          <Col span="24" class="detail-table__col">门店名称：{{channelDeatil.shopName}}</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">分类名称：{{goodsDetail.parentCategoryName}} - {{goodsDetail.categoryName}}</Col>
          <Col span="12" class="detail-table__col">是否为虚拟商品：{{goodsDetail.goodsType === 0 ? '否' : goodsDetail.goodsType === 1 ? '是': ''}}</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">所属类型：{{goodsDetail.relatedType}}</Col>
          <Col span="12" class="detail-table__col">对应分类：{{goodsDetail.classify}}</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">商品标题：{{channelDeatil.title}}</Col>
          <Col span="12" class="detail-table__col">商品名称：{{goodsDetail.skuName}}</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">商品条码：{{goodsDetail.barcode}}</Col>
          <Col span="12" class="detail-table__col">商品编码：{{goodsDetail.skuId}}</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">商品数量：1</Col>
          <Col span="12" class="detail-table__col">商品单位：{{goodsDetail.goodsUnit === 0 ? '个': goodsDetail.goodsUnit === 1 ? '枚' : goodsDetail.goodsUnit === 2 ? '份':''}}</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">局数：{{goodsDetail.ticketNum}}局</Col>
          <Col span="12" class="detail-table__col">销售形式：{{goodsDetail.saleType === 1 ? '单独销售': goodsDetail.saleType === 0 ? '打包销售':''}}</Col>
        </Row>
        <Row>
          <Col span="24" class="detail-table__col">
            <table>
              <tr>
                <td width="60" valign="top">项目设置：</td>
                <td class="detail-table-multimedia">
                  <span v-for="(ele, i) in channelDeatil.machineList" :key='i'>
                    <span>{{ele.machineName}}</span>
                    <span v-if="goodsDetail.goodsKind === '02-0201'">{{ele.count}}局</span>
                    <span v-if="i !== channelDeatil.machineList.length-1">、</span>
                  </span>
                </td>
              </tr>
            </table>
          </Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">有效期：{{channelDeatil.validType === 1 ? '指定时间':channelDeatil.validType === 2 ? '相对时间':''}}</Col>
          <Col span="12" class="detail-table__col" v-if="channelDeatil.validType === 2">时长：{{channelDeatil.subChannelGameCoupons.validDays}}天</Col>
          <Col span="12" class="detail-table__col" v-if="channelDeatil.validType === 1">开始时间与结束时间：{{channelDeatil.subChannelGameCoupons.validStart + "至" + channelDeatil.subChannelGameCoupons.validEnd}}</Col>
        </Row>
        <Row v-if="goodsDetail.goodsKind === '02-0202'">
          <Col span="24" class="detail-table__col">每天使用局数限制：{{channelDeatil.subChannelGameCoupons.dailyUseLimit}}局</Col>
        </Row>
        <Row>
          <Col span="24" class="detail-table__col">
            <table>
              <tr>
                <td width="60" valign="top">商品图片：</td>
                <td class="detail-table-multimedia">
                  <div>
                    <img :src="channelDeatil.thumbnail ? channelDeatil.thumbnail: ''" alt="" style="width: 96px;height: 96px;margin-right:20px">
                  </div>
                </td>
              </tr>
            </table>
          </Col>
        </Row>
      </div>
    </div>
    <div class="container">
      <div class='commodity-title'>
        <p></p>
        <h3>价格信息</h3>
      </div>
      <div class="detail-table">
        <Row>
          <Col span="12" class="detail-table__col">
            销售渠道：{{channelDeatil.channelId === '1' ? '收银台': channelDeatil.channelId === '2' ? '一体机': channelDeatil.channelId === '4' ? '微信商城': channelDeatil.channelId === '8' ? '移动设备':''}}
          </Col>
          <Col span="12" class="detail-table__col">
            可售库存：{{channelDeatil.inventory === -1 ? '不限': channelDeatil.inventory}}
          </Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">商品价：{{goodsDetail.gameTicketPrice}}元</Col>
          <Col span="12" class="detail-table__col">平台价格：{{channelDeatil.standPrice}}元</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">上架时间：{{channelDeatil.listingAt}}</Col>
          <Col span="12" class="detail-table__col">下架时间：{{channelDeatil.delistingAt}}</Col>
        </Row>
      </div>
    </div>
    <div class="container">
      <div class='commodity-title'>
        <p></p>
        <h3>售卖规则</h3>
      </div>
      <div class="detail-table">
        <Row>
          <Col span="12" class="detail-table__col">购买最少限制：{{channelDeatil.limitUnit === 0 ? '不限制': channelDeatil.limitUnit === 1 ? '天': channelDeatil.limitUnit === 2 ? '周': channelDeatil.limitUnit === 3 ? '月': channelDeatil.limitUnit === 4 ? '年':''}}</Col>
          <Col span="12" class="detail-table__col">购买数量：{{channelDeatil.amountLimit}}份</Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import { getChannelDetail } from '@/api/commondity/index'
export default {
  name: 'gameticket_detail',
  data () {
    return {
      goodsDetail: {},
      channelDeatil: {}
    }
  },
  methods: {
    getDetail () {
      getChannelDetail({
        merchantId: this.$store.state.user.merchantId,
        channelGoodsId: this.$route.params.id
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.goodsDetail = result.data.goods
          this.channelDeatil = result.data.channelGoods
          this.channelDeatil.standPrice = this.channelDeatil.goodsPrices[0].amount.toFixed(2)
          this.channelDeatil.limitUnit = this.channelDeatil.subChannelGameCoupons[0].limitUnit
          this.channelDeatil.amountLimit = this.channelDeatil.subChannelGameCoupons[0].amountLimit
          this.channelDeatil.subChannelGameCoupons = this.channelDeatil.subChannelGameCoupons[0]
          this.goodsDetail.gameTicketPrice = Number(this.goodsDetail.gameCouponPriceConfig.configValue).toFixed(2)
          this.goodsDetail.ticketNum = this.goodsDetail.gameCouponTimesConfig.configValue
          this.goodsDetail.relatedType = this.goodsDetail.goodsKindList[0].typeName
          this.goodsDetail.classify = this.goodsDetail.goodsKindList[1].typeName
          this.goodsDetail.saleType = this.goodsDetail.gameCouponExtra.saleType
          this.channelDeatil.machineList = JSON.parse(this.channelDeatil.subChannelGameCoupons.params)
          this.channelDeatil.validType = this.channelDeatil.subChannelGameCoupons.validType
        } else {
          this.$Message.error(`${result.error}`)
        }
      })
    }
  },
  mounted () {
    this.getDetail()
  }
}
</script>

<style lang="less">
@import '~@/assets/stylus/detail-table.less';
#gameticket_detail{
  padding: 25px 100px;
  .container {
    margin-bottom: 70px;
    .commodity-title {
      display: flex;
      margin-bottom: 30px;
      p {
        width: 8px;
        height: 20px;
        margin-right: 10px;
        background-color: #2d8cf0;
      }
    }
  }
}
</style>
